.approval {
  //公共样式写上面
  p,
  a,
  span,
  textarea {
    color: #333;
    font-size: .14rem;
  }

  p {
    margin-bottom: 0;
  }

  input[hidden] {
    display: none;
  }

  input[type=color],
  input[type=date],
  input[type=datetime-local],
  input[type=datetime],
  input[type=email],
  input[type=month],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=text],
  input[type=time],
  input[type=url],
  input[type=week],
  select,
  textarea {
    padding: 0 .1rem;
    margin-bottom: 0;
    max-width: 2.5rem;
    height: auto;
    border: 0;
    font-size: .15rem;

    &.up-down-border {
      border-width: 1px 0 1px 0;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.2);
    }
  }

  textarea {
    max-width: 100%;
    height: 1.29rem;
  }

  .bold {
    font-weight: bolder;
  }

  .title,
  .box {
    font-size: .15rem;
    padding-left: .1rem;
  }

  .header {
    font-size: .16rem;
  }

  .big {
    font-size: .19rem;
  }

  //color
  .gray {
    color: #888;
  }

  .red {
    color: #e95434 !important;
  }

  //display/positon,会居中
  .absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 80%;
    width: 80%;
    margin: auto;
    text-align: center;
  }

  //新加类，后期考虑抽取成公共类
  //09年的写法。后期要兼容标准写法
  .flex-center {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
  }

  .flex-box-col {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
  }

  //覆盖样式。妈的。这个好蛋疼啊。换了ui，现在样式就不同了
  .lf-list {

    li {
      position: relative;
      padding-top: 0rem;
      padding-bottom: 0;
      padding-right: .12rem;
    }

    //怎么快怎么来了!
    //TODO 这里很危险！！！
    .mui-table-view-cell > a:not(.btn) {
      margin-top: 0;
      margin-bottom: 0;
      margin-right: -.12rem;
      height: .7rem;

      display: -webkit-box;
      display: -webkit-flex;
      -webkit-box-pack: center;
      -webkit-justify-content: space-between;

      > div {
        height: 100%;
      }

      .flex-box-col {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
      }

      .flex-box-col:last-child {
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
      }

      .small {
        font-size: .12rem;
      }

    }
  }

  .approval-detail-header {
    height: .88rem;

    > img {
      height: 70%;
      margin: 0 .32rem 0 .19rem;
    }

    .person {
      height: 50%;
      -webkit-justify-content: space-between;
    }
  }

  //覆盖mui的按钮样式
  .mui-btn {
    padding: .06rem .12rem;
    margin: .1rem .12rem .1rem 0;
    border: 1px solid #ccc;

    &:active {
      background: #ccc;
    }

    &.text-dot {
      padding: .06rem .05rem;
      width: .7rem;
    }
  }

  .mui-btn.active,
  .short-btn.active {
    color: #fff;
    border-color: #2cc57b;
    background-color: #2cc57b;

    > span {
      color: #fff;
    }
  }

  .no-padding {
    padding: 0;
  }

  .mui-padding {
    padding: .06rem .12rem;
  }

  //绿
  .mui-btn-green {
    color: #fff;
    background: #2cc57b;
    border-color: #2cc57b;
  }

  //灰
  .mui-btn-gray {
    color: #fff;
    background: #a8a8a8;
    border-color: #a8a8a8;
  }

  .mui-btn-blue {
    color: #fff;
    background: #4779dc;
    border-color: #4779dc;
  }

  .mui-btn-red {
    color: #fff;
    background: #d65034;
    border-color: #d65034;
  }

  .disabled {
    color: #fff !important;
    background: #eee !important;
  }

  .input-box {
    text-align: center;

    &:last-child {
      margin-top: .14rem;
      margin-bottom: .1rem;
    }
  }

  .long-btn {
    width: 96%;
    height: .4rem;
    border-radius: 5px;
  }

  .header .item-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    height: .5rem;
    //padding-top: 0.07rem;
    background-color: white;
    margin: .083rem 0;
  }

  .header .item {
    -webkit-flex: 1;
    -webkit-box-flex: 1;

    > p {
      margin-top: .05rem;
    }
  }

  //5.5英寸, 1080*1920的机子，有点问题
  @media screen and (max-width: 360px) and (min-width: 360px) {

    .radio-wrapper {
      label.mui-btn {
        padding-top: 7.5px;
        padding-bottom: 5px;
      }

      .mui-padding {
        padding-top: 7.5px;
        padding-bottom: 5px;
      }
    }

  }

  &.index {
    background: #f2f2f2;

    .flex-box-row:first-child .item {
      border-top: 1px solid #ddd;
    }

    .flex-box-row:not(:first-child ) .item {
      border-top: 0;
    }

    .flex-item,
    .item {
      position: relative;
      height: .845rem;
      border: 1px solid #ddd;
      border-left: 0;

      :nth-child(3) {
        border-right: 0;
      }

      &:active {
        background: #f7f7f7;
      }
    }

    .item {
      width: 33.33%;
    }

    .header {
      margin-bottom: .29rem;

      img {
        width: .25rem;
        margin-right: .1rem;
      }
    }

    .body {
      font-size: .14rem;

      img {
        width: .3rem;
        height: .3rem;
        margin-bottom: .08rem;
      }
    }

    .tip-num {
      right: .2rem;
      top: .2rem;
    }
  }

  //我的审批/我的发起
  &.approval-list {
    .shot-width {
      width: 70%;
      margin: auto;
    }

    .split-line {
      width: 100%;
      height: .085rem;
      border-bottom: 1px solid #ddd;
      background: #f2f2f2;
    }

    .rectangle {
      display: none;
      position: absolute;
      bottom: .04rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: .21rem;
      height: .04rem;
      background: #2cc57b;
    }

    .header {
      a {
        position: relative;
        display: block;

        span {
          color: #ccc;
        }
      }

      a.active {

        span {
          color: #2cc57b;
        }

        .rectangle {
          display: block;
        }
      }

      span {
        line-height: .44rem;
      }
    }

    .body {

      .start-end-time {
        left: 30%;

        > span {
          display: inline;
        }
      }
    }

    .btn-box {
      text-align: right;

      > .mui-btn {
        width: .71rem;
        height: .32rem;
        margin: .05rem .1rem .05rem 0;

        &:last-child {
          margin-right: .12rem;
        }
      }

    }

    .lf-list .mui-table-view-cell > a:not(.btn) .flex-box-col:nth-child(2) {
      -wekbit-box-align: end;
      -webkit-align-items: flex-end;
    }

    .item {
      width: 50%;
    }

    .text-dot {
      width: 120%;
      line-height: 1.2em;
    }

    .flex-box-col > p:first-child {
      margin-bottom: .12rem;
    }

  }

  //提醒
  &.remind {
    .title {
      line-height: .35rem;
    }

    .remind-way {
      height: .52rem;
    }

    .todo {
      border-bottom: 1px solid rgba(0, 0, 0, 0.2)
    }

  }

  //新增审批    //审批详情
  &.approval-detail {
    input {
      line-height: .4rem;
    }

    .title {
      line-height: .4rem;
    }

    .margin-top {
      margin-top: .1rem;
    }

    //妈的样式开始有点乱了
    .input-row {
      margin-top: .1rem;
      background: #fff;
    }

    .input-box {
      margin-bottom: 0;

      .mui-bar {
        position: relative;
      }
    }

    .radio-wrapper {
      border-top: 1px solid #f2f2f2;
      background: #fff;
    }

    .mui-backdrop {
      opacity: 0;
      z-index: -1;
      -webkit-transition: .7s;
      transition: .7s;

      &.active {
        opacity: 1;
        z-index: 998;
      }
    }

    .mui-backdrop.active .task-processing-detail {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    .task-processing-detail {
      position: absolute;
      bottom: 0;
      max-height: 80%;
      width: 100%;
      padding: 0.37rem 0.23rem;
      overflow: auto;
      background: #fff;
      -webkit-transform: translateY(150%);
      transform: translateY(150%);
      -webkit-transition: .5s;
      transition: .5s;
    }

  }
  .attaches {
    background: #fff;
    padding-left: .1rem;
    padding-right: .1rem;
    .flex-item {
      padding: .03rem 0 .03rem 0;
      text-align: left;
      font-size: .15rem;
      color: #2cc57b;
      &.not-pdf {
        color: #333;
      }
      &:first-child {
        -webkit-box-flex: 5;
        -webkit-flex: 5;
      }
      &:last-child {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        text-align: right;
      }
    }
  }

}